<template>
	<view class="content">
		<!-- web-view -->
		<!-- #ifdef MP-WEIXIN H5 -->
		<view>
			<web-view class="webView" :src="`https://cbs-h5.sports.cctv.com/app_plus_new/league/${ball}_ranking.html?leagueid=${leagueId}`">
			</web-view>
		</view>
		<!-- #endif -->
		
		<!-- <view class="datails">自己写的布局
			
			<view v-if="ball === 'football'">
				<view class="football-title">
					<image class="football-title-img" :src="leagueImg" mode="aspectFit"></image>
					<text class="title-text">{{shortName}}</text>
				</view>
				<view class="list-th">
					<view class="list-th-itme"></view>
					<view class="list-th-itme teamName">球队</view>
					<view class="list-th-itme">场次</view>
					<view class="list-th-itme">胜</view>
					<view class="list-th-itme">平</view>
					<view class="list-th-itme">负</view>
					<view class="list-th-itme">进/失</view>
					<view class="list-th-itme">积分</view>
				</view>
				<view class="list-data" v-for="itme,index in fooArr " :key="itme.id">
					<view class="list-data-itme">{{index+1}}</view>
					<view class="list-data-itme">
						<image class="list-data-itme-img" :src="itme.logoUrl" mode="aspectFit"></image>
					</view>
					<view class="list-data-itme teamName">{{itme.teamName}}</view>
					<view class="list-data-itme">{{itme.games}}</view>
					<view class="list-data-itme">{{itme.wins}}</view>
					<view class="list-data-itme">{{itme.draws}}</view>
					<view class="list-data-itme">{{itme.losses}}</view>
					<view class="list-data-itme">{{itme.goalsFor}}/{{itme.goalsAgainst}}</view>
					<view class="list-data-itme">{{itme.points}}</view>
				</view>
			</view>
	
			<view v-else-if="ball === 'basketball'">
				<view class="football-title">
					<image class="football-title-img" :src="leagueImg" mode="aspectFit"></image>
					<text class="title-text">{{shortName}}</text>
				</view>
				<view class="list-th">
					<view class="list-th-itme"></view>
					<view class="list-th-itme teamName">球队</view>
					<view class="list-th-itme"></view>
					<view class="list-th-itme basketball-wins">胜</view>
					<view class="list-th-itme"></view>
					<view class="list-th-itme basketball-losses">负</view>
					<view class="list-th-itme"></view>
					<view class="list-th-itme basketball-winRate">胜率</view>
				</view>

				<view class="list-data" v-for="itme,index in fooArr " :key="itme.id">
					<view class="list-data-itme">{{index+1}}</view>
					<view class="list-data-itme">
						<image class="list-data-itme-img" :src="itme.logoUrl" mode="aspectFit"></image>
					</view>
					<view class="list-data-itme teamName">{{itme.teamName}}</view>
					<view class="list-data-itme"></view>
					<view class="list-data-itme">{{itme.wins}}</view>
					<view class="list-data-itme"></view>
					<view class="list-data-itme">{{itme.losses}}</view>
					<view class="list-data-itme"></view>
					<view class="list-data-itme">{{(itme.winRate*100).toFixed(1) + '%'}}</view>
				</view>
			</view> -->
			<!--没有数据时显示 -->
			<view v-show="fooArr.length === 0" style="text-align: center;margin-top: 20px;color: #767676;"
				class="noData">暂无更多数据</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				//第一层数据
				footballArr: [],
				//第二层数据
				footballDataArr: [],
				//第三次数据
				fooArr: [],
				//用于判断是足球还是篮球
				ball: '',
				//联赛ID
				leagueId: '',
				//联赛名字
				shortName: '',
				//联赛图片
				leagueImg: 0,
			};
		},
		onLoad(e) {
			console.log(e, 'ranking-details------');
			this.leagueId = e.id
			let type = e.type
			this.shortName = e.shortName
			this.leagueImg = e.logoPath
			console.log(e.logoPath, 'e.logoPath-------------');
			if (type === '2') {
				this.ball = 'basketball'

			}
			if (type === '1') {
				this.ball = 'football'

			}
			this.getDetails()

		},
		onShow() {

			/* this.leagueId = e.id
			if (e.type === 2) {
				this.ball = 'basketball'
			}
			if(e.type === 1){
				this.ball = 'football'
			}
			this.getDetails() */
		},
		onBackPress(e) {
			if (e === 'backbutton') {
				page.route()
				console.log(page.route(), 'backbutton ');
			}
		},
		methods: {
			getDetails() {
				uni.request({
					url: `https://cbs-u.sports.cctv.com/statistics/${this.ball}/team/rankings?leagueId=${this.leagueId}&ran=${Date.now()}`,
					/* https://cbs-i.sports.cctv.com/cache/ef972bd6675867a16c8fd5c0b4597a56?ran=1668853113695 */
					method: 'GET',
					data: {},
					success: res => {
						console.log(res.data.results);
						//赋值
						this.footballArr = res.data.results
						for (let i = 0; i < this.footballArr.length; i++) {

							this.footballDataArr.push(...this.footballArr[i].rankings)

							for (let i = 0; i < this.footballDataArr.length; i++) {

								this.fooArr.push(...this.footballDataArr[i].ranking)
							}
						}

						console.log(this.fooArr, 'fooArr---------');
					},
					fail: (err) => {
						console.log(err);
					},
					complete: () => {}
				});
			},
		}

	}
</script>

<style lang="scss">
	
	.content {

		.datails {

			.football-title {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 5px;

				.football-title-img {
					width: 36px;
					height: 36px;
				}

				.title-text {
					font-size: 36rpx;
					font-weight: 700;
				}

			}

			.list-th {
				display: flex;
				justify-content: space-around;
				align-items: center;
				margin: 5px 0px;

				.list-th-itme {
					font-size: 32rpx;
					color: #000;

					&.basketball-wins {
						margin-left: 8px;
					}

					&.basketball-losses {
						margin-right: 10px;
					}

					&.basketball-winRate {
						margin-right: 20px;
					}

				}

				.list-th-itme:nth-child(2),
				.list-th-itme:nth-child(4) {
					transform: translateX(50px);
				}

				.list-th-itme:nth-child(3) {
					transform: translateX(60px);
				}

				.list-th-itme:nth-child(5) {
					transform: translateX(40px);
				}

				.list-th-itme:nth-child(6) {
					transform: translateX(30px);
				}

				.list-th-itme:nth-child(7) {
					transform: translateX(18px);
				}

				.list-th-itme:nth-last-child(1) {
					transform: translateX(8px);
				}
			}

			.list-data {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border: #959595 1px solid;
				border-radius: 10px;
				margin: 10px 0;

				.list-data-itme {
					margin: 10px 0px;

					.list-data-itme-img {
						width: 30px;
						height: 30px;
						transform: translateX(-20px);
					}
				}

				.list-data-itme:nth-child(1) {
					width: 25px;
					height: 30px;
					background-color: #ff8e0c;
					border-radius: 5px;
					color: #fff;
					text-align: center;
					line-height: 30px;

				}

				.list-data-itme:nth-child(9) {
					position: absolute;
					right: 15px;
				}

				.list-data-itme:nth-child(8) {
					position: absolute;
					right: 55px;
				}

				.list-data-itme:nth-child(7) {
					position: absolute;
					right: 110px;
				}

				.list-data-itme:nth-child(6) {
					position: absolute;
					right: 135px;
				}

				.list-data-itme:nth-child(5) {
					position: absolute;
					right: 168px;

				}

				.list-data-itme:nth-child(4) {
					position: absolute;
					right: 205px;
				}

				.list-data-itme:nth-child(3) {
					position: absolute;
					left: 70px;
				}

				.list-data-itme:nth-child(2) {
					position: absolute;
					left: 50px;
				}



			}


			//width: 100%;
			/* .dataTable {
				table-layout: auto;

				.league-title {
					color: #000;
					font-size: 32rpx;				
				}
				.league-img{
					width: 80rpx;
					height: 70rpx;
				}

				.league-th {
					table-layout: auto;
					padding: 0 !important;
					height: 80rpx;
					line-height: 80rpx;

					.league-td{
						padding: 0 !important;
						line-height:80rpx;
						
						&.number{
							background-color: #ff8e0c;
							border-radius: 10%;

							color: #fff;
						}
						.logo{
							display: flex;
							
							width: 60rpx;
							height: 60rpx;
							line-height: 80rpx;
							left: 15px;
							top: 8px;
							
							
							
						}
					
					}

					
				}
				
				.league-tr{
					table-layout: auto;
					padding: 0 !important;
					height: 80rpx;
					line-height: 80rpx;
					.title {
						padding: 0 !important;
					}
				}
			} */
		}
	}
</style>
